<template>
  <div class="helpBase" :class="{'isFixed': fixed}">
    <div v-if="!isLogin" class="help">
      <a href="../../../../static/html/help.html" target="_blank">
        <i class="el-icon-question"></i>
        <p>帮助中心</p>
      </a>
    </div>
    <div v-if="!isLogin" class="server" @mouseover="showServer=true" @mouseout="showServer=false">
      <h6>联系客服</h6>
      <p>上班时间</p>
      <p>9:00-18:00</p>
      <img class="img-s" :src="logoInfo.servicePic || initImg" alt="联系客服">
      <transition name="el-fade-in-linear">
        <img v-show="showServer" class="img-l" :src="logoInfo.servicePic || initImg" alt="客服微信">
      </transition>
    </div>
    <div v-if="isLogin" class="serverGuider">
      <h2>服务指南</h2>
      <div class="title">
        <i class="head"></i>
        <span>专属客服：{{ buessInfo.nameOut || '客服1' }}</span>
      </div>
      <div class="connect" v-if="userInfo.substationBusinessRealName">
        <div class="text">
          <span>微信</span>
          <strong>
            <span>{{ buessInfo.wechatNum || '--' }}</span>
            <i class="copyChat" @click="copyChat(buessInfo.wechatNum || '')">复制</i>
          </strong>
        </div>
        <div class="imgs">
          <img class="img-s" @mouseover="showChat = true" @mouseout="showChat = false" :src="buessInfo.wechatNumPic || logoInfo.servicePic || initImg" alt="code">
          <transition name="el-fade-in-linear">
            <img v-show="showChat" class="img-l" :src="buessInfo.wechatNumPic || logoInfo.servicePic || initImg" alt="code">
          </transition>
        </div>
      </div>
      <div class="connect" v-if="userInfo.substationBusinessRealName">
        <div class="text">
          <span>QQ</span>
          <strong>
            <span>{{ buessInfo.qq || '--' }}</span>
            <i class="copyQQ" @click="copyQQ(buessInfo.qq || '')">复制</i>
          </strong>
        </div>
        <div class="imgs" v-if="buessInfo.qqPic">
          <img class="img-s" @mouseover="showQQ = true" @mouseout="showQQ = false" :src="buessInfo.qqPic || logoInfo.servicePic || initImg" alt="code">
          <transition name="el-fade-in-linear">
            <img v-show="showQQ" class="img-l" :src="buessInfo.qqPic || logoInfo.servicePic || initImg" alt="code">
          </transition>
        </div>
      </div>
      <div class="singleImg" v-if="!userInfo.substationBusinessRealName">
        <img class="img-s" @mouseover="showInit = true" @mouseout="showInit = false" :src="logoInfo.servicePic || initImg" alt="code">
        <transition name="el-fade-in-linear">
          <img v-show="showInit" class="img-l" :src="logoInfo.servicePic || initImg" alt="code">
        </transition>
      </div>
      <div class="footer">
        <h2>
          <a href="../../../../static/html/help.html" target="_blank">帮助中心</a>
          <a href="../../../../static/html/video.html" target="_blank">视频介绍</a>
        </h2>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters } from 'vuex'
import Clipboard from 'clipboard'
export default {
  name: 'helpBase',
  props: {
    fixed: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    isLogin: {
      get: function () {
        if (this.userInfo.userName) {
          return true
        } else {
          return false
        }
      },
      set: function (val) {
        return val
      }
    },
    ...mapGetters([
      'logoInfo',
      'userInfo'
    ])
  },
  data () {
    return {
      showServer: false,
      initImg: require('@/assets/images/weiCode.png'),
      showQQ: false,
      showChat: false,
      showInit: false,
      buessInfo: ''
    }
  },
  methods: {
    copyChat (text) {
      let bord = new Clipboard('.copyChat', {
        text: () => {
          return text
        }
      })
      bord.on('success', () => {
        this.$message({
          message: '复制成功',
          type: 'success'
        })
      })
    },
    copyQQ (text) {
      let bord = new Clipboard('.copyQQ', {
        text: () => {
          return text
        }
      })
      bord.on('success', () => {
        this.$message({
          message: '复制成功',
          type: 'success'
        })
      })
    },
    getBuessInfo () {
      if (this.userInfo.substationBusinessId) {
        this.$ajax.post('/api/business/account/getBusinessInfoByBusinessId', {
          businessId: this.userInfo.substationBusinessId
        }).then((res) => {
          if (res.data.code === '200') {
            this.buessInfo = res.data.data
          }
        })
      }
    }
  },
  created () {
    this.getBuessInfo()
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../assets/stylus/index.styl'
.helpBase
  // width 100px
  height 280px
  position relative
  background #ffffff
  z-index 10
  top 0
  bottom 0
  // left 8px
  margin auto 0
  border none
  border-radius 4px
  .help
    width 100px
    height 100px
    background #ffffff
    border-radius 4px
    >a
      text-decoration none
      color $buttonBg
      display flex
      width 100%
      height 100%
      flex-direction column
      justify-content center
      align-items center
      transition all 0.2s
      &:hover
        color $buttonBg
      i
        font-size 30px
      p
        font-size 14px
        text-align center
  .server
    width 100px
    height 180px
    background #F4F4F5
    border-radius 4px
    display flex
    flex-direction column
    justify-content center
    align-items center
    h6
      fontSize($fontSize, 20px, $fontColor)
    p
      fontSize(10px, 18px, $fontColor-gray)
      letter-spacing 1px
    .img-s
      width 62px
      max-height 100px
    .img-l
      position absolute
      background #ffffff
      z-index 999
      bottom 0
      left 110px
      width 200px
  .serverGuider
    margin-top 25px
    padding 5px
    >h2
      font-size 16px
      border-bottom 1px solid #EEEEEE
      line-height 20px
    .title
      padding 5px 0
      i
        display inline-block
        width 28px
        height 28px
        background orange url('http://pub.idqqimg.com/wpa/images/counseling_style_51.png')
        background-size 100% 100%
        background-position center
        background-repeat no-repeat
        border-radius 50%
        vertical-align middle
      span
        font-size 12px
        color #999999
        line-height 18px
        margin-left 5px
    .connect
      display flex
      // justify-content space-around
      align-items center
      margin 10px 0
      .text
        display flex
        flex-direction column
        margin-right 5px
        span
          font-size 12px
          line-height 18px
          color #999999
        strong
          display flex
          align-items center
          span
            width 65px
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
          i
            font-size 10px
            text-align center
            line-height 12px
            height 12px
            width 28px
            background #D01126
            color #ffffff
            cursor pointer
      .imgs
        position relative
        .img-s
          width 45px
          height 45px
          cursor pointer
        .img-l
          position absolute
          width 200px
          top 0
          left 45px
          z-index 10
    .singleImg
      position relative
      text-align center
      .img-s
        width 100px
        height 100px
        cursor pointer
      .img-l
        position absolute
        width 200px
        top 0
        left 100%
        z-index 10
    .footer
      border-top 1px solid #eeeeee
      h2
        display flex
        justify-content space-between
        padding 10px 0
        a
          fontSize(14px, 20px, #D01126)
          font-weight bold
          cursor pointer
          text-decoration none
.isFixed
  position fixed
  border 1px solid #D9D7D7
</style>
